<template>
	<view class="container">
		<uni-icons :type="iconType" size="100" :color="iconColor"></uni-icons>
		<view class="tips-text">{{ tipsText }}</view>
		<view class="content-wrapper">
			<view class="info-row" v-for="(info, index) in infoList" :key="index">
				<view class="info-label">{{ info.label }}</view>
				<view class="info-value">{{ info.value }}</view>
			</view>
		</view>
		<button class="botom" @click="offappoint" v-if="showCancelButton">{{ cancelButtonText }}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appointlistById: [],
				appointmentId: '',
				infoList: [{
						label: '预约类型:',
						value: ''
					},
					{
						label: '预约时间:',
						value: ''
					},
					{
						label: '预约状态:',
						value: ''
					},
					{
						label: '备注:',
						value: ''
					},
					{
						label: '订单创建时间:',
						value: ''
					}
				],
				iconType: 'checkbox-filled',
				iconColor: 'green',
				tipsText: '预约成功',
				showCancelButton: true,
				cancelButtonText: '取消预约'
			};
		},
		onLoad(options) {
			this.appointmentId = options.appointmentId;
			this.getAppointlistById();
		},
		methods: {
			async getAppointlistById() {
				try {
					const res = await uni.$http.get(`/wx/appointlistById/${this.appointmentId}`);
					this.appointlistById = res.data.data;
					this.updateInfoList();
					this.updateUI();
				} catch (e) {
					console.error(e);
				}
			},
			updateInfoList() {
				this.infoList = [{
						label: '预约类型:',
						value: this.appointlistById.appointmentType
					},
					{
						label: '预约时间:',
						value: this.formatDate(this.appointlistById.appointmentTime)
					},
					{
						label: '预约状态:',
						value: this.appointlistById.appointmentStatus
					},
					{
						label: '备注:',
						value: this.appointlistById.notes
					},
					{
						label: '订单创建时间:',
						value: this.formatDate2(this.appointlistById.updatedAt)
					}
				];
			},
			updateUI() {
				if (this.appointlistById.appointmentStatus === '已取消') {
					this.iconType = 'checkbox';
					this.iconColor = 'green';
					this.tipsText = '取消预约成功';
					this.showCancelButton = false;
				} else {
					this.iconType = 'checkbox-filled';
					this.iconColor = 'green';
					this.tipsText = '预约成功';
					this.showCancelButton = true;
					this.cancelButtonText = '取消预约';
				}
			},
			formatDate(dateString) {
				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			formatDate2(dateString) {
				return dateString.replace('T', ' ');
			},
			async offappoint() {
				try {
					await uni.$http.put('/wx/offappoint', {
						appointmentId: this.appointmentId
					});
					this.getAppointlistById();
					uni.showToast({
						title: '取消预约成功！',
						icon: 'success'
					});
				} catch (e) {
					uni.showToast({
						title: '取消失败！请联系客服。',
						icon: 'error'
					});
					console.error(e);
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		// 登录盒子的样式
		height: 500px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
		position: relative;
		overflow: hidden;

		.tips-text {
			color: green;
			font-size: 24px;
			margin: 5px 0 30px 0;
		}

		.content-wrapper {
			display: flex;
			flex-direction: column;
			background-color: #ededed;
			padding: 20px;
			margin: 0 10px;
			font-size: 12px;
			border-radius: 10px;
		}

		.info-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}

		.info-label {
			// 可以设置固定的宽度或者根据内容自动调整
			width: 100px; // 示例宽度，可以根据需要调整
			color: #333; // 示例颜色，可以根据需要调整
		}

		.info-value {
			flex: 1;
			text-align: right; // 让数据靠右对齐
		}

		.botom {
			width: 80%;
			border-radius: 30px;
			background-color: #ffffff;
			color: #7bb3f8;
			border: 1px solid #7bb3f8;
			margin: 20px 0 50px 0;
		}

		.uni-body {
			line-height: 20rpx;
		}

	}
</style>